<template>
    <div class="GridCard-component">
        <div class="GridCard-title" v-if="title != undefined" :style="titleStyle">
            <span>{{title}}</span>
        </div>
        <Grid :border="false" :column-num="columnNum">
            <GridItem v-for="item in items" :text="item.text" :dot="item.dot" :badge="item.badge" :url="item.url" :to="item.to" @click="item.func">
                <template #icon>
                    <svg-icon v-if="item.svg" :name="item.svg"></svg-icon>
                    <Icon v-else-if="item.icon" :name="item.icon"></Icon>
                    <img v-else-if="item.img" :src="imgObj[item.img]" style="height: 35px; width: 35px;" />
                    <Icon v-else name="photo-o"></Icon>
                </template>
            </GridItem>
        </Grid>
    </div>
</template>
<script setup name="GridCardComponent">
import { Grid, GridItem, Icon } from "vant"
import { defineEmits } from "vue";
import order from "@/assets/my/order.png";
import payment from '@/assets/my/payment.png'
import shipments from '@/assets/my/shipments.png'
import delivery from '@/assets/my/delivery.png'
import receiving from '@/assets/my/receiving.png'
import done from '@/assets/my/done.png'
import aftersales from '@/assets/my/aftersales.png'
import coupons from '@/assets/my/coupons.png'
import certificates from '@/assets/my/certificates.png'
import vouchers from '@/assets/my/vouchers.png'
import userecords from '@/assets/my/userecords.png'
import recording from '@/assets/my/recording.png'
const imgObj = ref({
    order,
    payment,
    shipments,
    delivery,
    receiving,
    done,
    aftersales,
    coupons,
    certificates,
    vouchers,
    userecords,
    recording,
})

const emit = defineEmits()
const props = defineProps({
    title: {
        type: String,
        default: undefined
    },
    titleStyle: {
        type: Object,
        default: {}
    },
    columnNum:{
        type: Number,
        default: 4
    },
    items: {
        type: Object,
        default: {}
    },
})
</script>
<style lang="scss" scoped>
.GridCard-component {
    overflow: hidden;
    margin: 5px 15px 5px 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px var(--van-border-color);
    background-color: var(--van-grid-item-content-background-color);
    .GridCard-title{
        margin: 10px 0 0 20px;
    }
}
:deep(.van-grid-item__text){
    font-weight: 700;
}
</style>